<template>
<div class="news-container">
    <div class="news-header">
        <h1 class="news-heading">{{ news.title }}</h1>
        <span class="news-date">{{ news.createTime | formatDate }}</span>
    </div>
    <div class="news-content">
        {{ news.content }}
    </div>
</div>
</template>

<script>
export default {
    name:"newsDetail",
    data(){ 
        return{
          news:{
            id:0,
            title:"",
            content:"",
            createTime:"",
          }
        }
    },methods: {
        getNewsDetail(){
            this.news.id=this.$route.query.id;
            console.log("拿到的id:"+this.news.id);
            this.$axios.post("api/news/getNewsDetail",{
                id:this.news.id
            }).then((rs) => {
                this.news=rs.data.news;
        })
        .catch((error) => {
          console.error(error);
        });
        }
},created(){
    this.getNewsDetail();
},watch: {
    '$route.params.id'() {
      this.getNewsDetail();
    }
  },  filters: {
    formatDate(date) {
      if (!date) return '';
      const d = new Date(date);
      const year = d.getFullYear();
      const month = ('0' + (d.getMonth() + 1)).slice(-2);
      const day = ('0' + d.getDate()).slice(-2);
      return `${year}-${month}-${day}`;
    }
}
}
</script>

<style scoped>
.news-container {
  max-width: 800px;
  margin: 50px auto;
  padding: 40px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  font-family: 'Arial', sans-serif;
}

.news-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.news-heading {
  font-size: 36px;
  color: #2c3e50;
  font-weight: bold;
  margin: 0;
}

.news-date {
  font-size: 14px;
  color: #777777;
  font-style: italic;
}

.news-content {
  font-size: 18px;
  color: #333333;
  line-height: 1.6;
  text-align: left;
}
</style>